<!DOCTYPE html>
<template>
  <div>
    <div id="title">
      <img src="@/assets/img/u57.png" alt="">
      <span class="title-content">栏目管理</span>
    </div>
    <div class="content">
      <div class="reduce-column">
        <p>点击删除一下频道</p>
        <ul>
          <li @click="delItem(index)" v-for="(item, index) in delStr" :key="index">
            <input type="button" :value="item.name">
          </li>

        </ul>
      </div>
      <div class="add-column">
        点击添加一下频道
        <ul>
          <li @click="addItem(index)" v-for="(item, index) in addStr" :key="index">
            <input type="button" :value="item.name">
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import catgoryApi from '@/api/index'

export default {
  data() {
    return {
      // delStr: ["图鉴", "热点", "娱乐", "科技", "汽车", "财经", "军事", "国际", "时尚", "历史", "故事"],
      delStr: JSON.parse(localStorage.getItem('delStr')) || [],
      // addStr: ["社会", "体育", "游戏", "旅游", "探索", "美食", "育儿", "养生", "美文"]
      addStr: JSON.parse(localStorage.getItem('addStr')) || []
    }
  },
  created() {
    this.getCategoryData()
  },
  methods: {
    getCategoryData() {
      if(this.delStr){
        return
      }
      catgoryApi.getCategoryData().then(res => {
        this.delStr = res.data.data
        console.log(this.delStr);
      })
    },
    delItem(index) {
      this.delStr.splice(index, 1)
      this.addStr.push(this.delStr[index])
      localStorage.setItem('delStr', JSON.stringify(this.delStr))
      localStorage.setItem('addStr', JSON.stringify(this.addStr))
    },
    addItem(index) {
      this.addStr.splice(index, 1)
      this.delStr.push(this.addStr[index])
      localStorage.setItem('delStr', JSON.stringify(this.delStr))
      localStorage.setItem('addStr', JSON.stringify(this.addStr))
    }
  }
}
</script>

<style scoped>
#title {
  margin-top: 6vw;
}

#title img {
  position: absolute;
  width: 4vw;
  left: 3.5vw;
  vertical-align: middle;
}

.title-content {
  display: block;
  text-align: center;
  font-size: 4vw;
  font-weight: 700;
  color: #33336a;
}

.content {
  padding: 0 0 0 4vw;
}

.reduce-column ul,
.add-column ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8vw;
  /* justify-content: space-between */
}

.reduce-column p {
  margin-top: 8vw;
}

.reduce-column li,
.add-column li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 25%;
  margin-top: 4vw;
}

.reduce-column li input,
.add-column li input {
  width: 100%;
  height: 10vw;
  background-color: #f2f2f2;
  border: 1px solid #d0d0d0;
  margin-right: 4vw;
}

.add-column p {
  margin-top: 8vw;
}
</style>
